<template>
  <div class="agreement-container">
    <h1>短视频剧本授权协议</h1>
    <div class="agreement-content">
      <p>
        甲方姓名（授权方）：
        <span class="editable" contenteditable="true">{{ writer.real_name }}</span>
      </p>
      <p>
        甲方账号（授权方）：
        <span class="editable" contenteditable="true">{{ writer.account }}</span>
      </p>
      <p>
        乙方（被授权方）：
        <span class="editable" contenteditable="true"></span>
      </p>
      <p>
        乙方账号（授权方）：
        <span class="editable" contenteditable="true"></span>
      </p>
      <p>
        鉴于甲方为短视频剧本《<span class="editable" contenteditable="true">{{ work.wname }}</span>》（以下简称“剧本”）的唯一合法著作权人，
        根据《中华人民共和国著作权法》及相关法律法规的规定，甲乙双方经友好协商，就甲方授权乙方使用该剧本达成如下协议：
      </p>

      <h2>第一条 剧本基本信息</h2>
      <p>
        1.1 剧本名称：
        <span class="editable" contenteditable="true">{{ work.wname }}</span>
      </p>
      <p>
        1.2 剧本作者：
        <span class="editable" contenteditable="true">{{ writer.uname }}</span>
      </p>
      <p>
        1.3 剧本类型：
        <span class="editable" contenteditable="true">{{ work_type.data }}</span>（例如：短视频剧本、微电影剧本、广告剧本等）
      </p>
      <p>
        1.3 剧本题材：
        <span class="editable" contenteditable="true">
          {{ scriptTypes.map(scriptType => scriptType.bname).join('、') }}
        </span>（例如：喜剧、剧情、悬疑等）
      </p>
      <h2>第二条 授权内容</h2>
      <p>
        2.1 甲方特此授予乙方非独家、不可转让的改编权和拍摄权，即乙方有权在本协议约定的范围内，将剧本改编为短视频并进行拍摄制作。
      </p>
      <p>2.2 乙方仅限于以下方式使用剧本：</p>
      <p>
        （1）将剧本改编为时长不超过<span class="editable" contenteditable="true" @input="updateTime">{{ work.time }}</span>分钟的短视频；
      </p>
      <p>
        （2）在<span class="editable" contenteditable="true" @input="updateplatform">{{ work.platform
          }}</span>（指定平台，如：抖音、快手等）发布改编后的短视频；
      </p>
      <p>
        （3）在中国大陆范围内传播改编后的短视频。
      </p>

      <h2>第三条 授权期限</h2>
      <p>
        本协议自双方签字盖章之日起生效，授权期限为<span class="editable" contenteditable="true" @input="updateage_limit">{{ work.age_limit
          }}</span>年。授权期限届满后，乙方应立即停止使用剧本，并删除或销毁所有基于本协议制作的改编作品。
      </p>

      <h2>第四条 费用与支付方式</h2>
      <p>
        4.1 乙方应向甲方支付一次性授权费用人民币
        <span class="editable" contenteditable="true"  @input="convertToChinese">{{ work.authorization_fee }}</span>
        元（大写：<span>{{ chineseAmount }}</span>元整），作为获得本协议项下改编权和拍摄权的对价。
      </p>
      <p>
        4.2 乙方应在本协议签署后<span class="editable" contenteditable="true"></span>日内，以<span class="editable"
          contenteditable="true"></span>（银行转账、支付宝、微信等）方式全额支付上述费用至甲方指定账户。
      </p>

      <h2>第五条 权利与义务</h2>
      <p>5.1 甲方保证其为剧本的合法著作权人，有权进行本协议项下的授权，且剧本内容不侵犯任何第三方的合法权益。</p>
      <p>5.2 乙方应确保改编后的短视频内容不违反法律法规，不含有侵犯他人知识产权、名誉权、隐私权等合法权益的内容。</p>
      <p>5.3 乙方在使用剧本及改编作品过程中，应尊重甲方的署名权，按照甲方要求的方式在短视频及相关宣传材料中明确标注甲方为原剧本作者。</p>

      <h2>第六条 违约责任</h2>
      <p>任何一方违反本协议约定，应承担违约责任，赔偿守约方因此遭受的直接经济损失。</p>

      <h2>第七条 争议解决</h2>
      <p>因本协议引起的或与本协议有关的任何争议，双方应首先通过友好协商解决；协商不成的，任何一方均有权将争议提交甲方所在地有管辖权的人民法院诉讼解决。</p>

      <h2>第八条 其他条款</h2>
      <p>8.1 本协议未尽事宜，双方可另行签订补充协议，补充协议与本协议具有同等法律效力。</p>
      <p>8.2 本协议一式两份，甲乙双方各执一份，自双方签字或盖章之日起生效。</p>

      <div class="sign-section">
        <div class="sign-block">
          <p>
            甲方（签字）：
            <span v-if="signatures.partyA" class="signature-image">
              <img :src="signatures.partyA" alt="甲方签字" />
            </span>
            <span v-else class="editable"></span>
          </p>
          <p>
            日期：
            <span class="date-display">{{ datePartyA }}</span>
          </p>
        </div>
        <div class="sign-block">
          <p>
            乙方（签字）：
            <span v-if="signatures.partyB" class="signature-image">
              <img :src="signatures.partyB" alt="乙方签字" />
            </span>
            <span v-else class="editable"></span>
          </p>
          <p>
            日期：
            <span class="date-display">{{ datePartyB }}</span>
          </p>
        </div>
      </div>
    </div>

    <!-- 签名弹出框 -->
    <div v-if="showSignaturePad" class="signature-pad-modal">
      <canvas ref="signaturePad" class="signature-canvas"></canvas>
      <button @click="saveSignature">保存签名</button>
      <button @click="clearSignature">清除签名</button>
      <button @click="closeSignaturePad">关闭</button>
    </div>

    <div class="action-buttons">
      <button @click="submitAgreement">保存设置</button>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, nextTick, onMounted, inject } from 'vue';
import SignaturePad from 'signature_pad';
import { useRouter, useRoute } from 'vue-router'
import CryptoJS from 'crypto-js';
const axios = inject('axios') //注入 axios
// 获取路由信息
const route = useRoute();

//解密token
function getToken() {
  const encryptedToken = localStorage.getItem('token');
  if (encryptedToken) {
    const secretKey = 'your_secret_key'; // 使用相同的密钥
    const bytes = CryptoJS.AES.decrypt(encryptedToken, secretKey);
    const decryptedToken = bytes.toString(CryptoJS.enc.Utf8);
    return decryptedToken;
  }
  return null;
}


console.log("id:" + route.params.id)


// State Variables
const chineseAmount = ref('_________'); // 初始大写内容
const showSignaturePad = ref(false); // 控制签名框显示
const currentSignatureParty = ref<string | null>(null); // 当前签名的用户（甲方或乙方）
const signatures = ref<{ partyA: string | null; partyB: string | null }>({ partyA: null, partyB: null }); // 存储签名图片
const signaturePad = ref<SignaturePad | null>(null); // 存储 SignaturePad 实例
const canvasRef = ref<HTMLCanvasElement | null>(null); // canvas 表单元素

// 业务逻辑
const openSignaturePad = (party: 'partyA' | 'partyB') => {
  console.log('openSignaturePad');
  currentSignatureParty.value = party;
  showSignaturePad.value = true;
  nextTick(() => {
    initSignaturePad();
  });
};

const initSignaturePad = () => {
  if (canvasRef.value) {
    const canvas = canvasRef.value;
    // 设置 canvas 宽度和高度为实际显示尺寸
    canvas.width = canvas.offsetWidth;
    canvas.height = canvas.offsetHeight;
    signaturePad.value = new SignaturePad(canvas);
  }
};

const saveSignature = () => {
  if (signaturePad.value?.isEmpty()) {
    alert("请签名！");
  } else {
    const dataUrl = signaturePad.value?.toDataURL();
    if (dataUrl) {
      signatures.value[currentSignatureParty.value as 'partyA' | 'partyB'] = dataUrl;
      // 发送签名到后端
      uploadSignature(dataUrl, currentSignatureParty.value);
      closeSignaturePad();
    }
  }
};

const uploadSignature = (dataUrl: string, party: string | null) => {
  const signatureData = {
    party, // 签名的用户（甲方/乙方）
    signature: dataUrl, // 签名的 base64 数据
  };

  fetch("http://localhost:3000/upload-signature", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify(signatureData),
  })
    .then(response => response.json())
    .then(data => {
      console.log("Signature saved:", data);
    })
    .catch(error => {
      console.error("Error saving signature:", error);
    });
};

const clearSignature = () => {
  signaturePad.value?.clear();
};

const closeSignaturePad = () => {
  showSignaturePad.value = false;
};

const convertToChinese = (event: InputEvent) => {
  const value = (event.target as HTMLElement).innerText.trim();
  console.log("========="+value);
  work.value.authorization_fee = value;
  // if (value && !isNaN(Number(value))) {
  //   chineseAmount.value = numberToChinese(Number(value));
  //   work.Authorization_fee = value;
  //   console.log("输入的金额："+value)
  // } else {
  //   chineseAmount.value = '_________'; // 当内容为空或无效时显示默认下划线
  // }
  convertToChinese2(value)
};

const convertToChinese2 = (value) => {
  console.log("convertToChinese2");
  
   // 如果输入值是空则直接赋值为下划线 
  //  console.log("value.trim():"+value.trim());
   
  //  if (value.trim() === '') {
  //   chineseAmount.value = '_________'; // 当内容为空时显示下划线
  //   work.value.authorization_fee = ''; // 清空费用
  //   console.log("work.value.authorization_fee:"+work.value.authorization_fee);
    
  //   return; // 退出函数
  // }
   // 执行有效性检查，确保是可转换的数字（包括支持负数和小数）
   const numericValue = Number(value);
   console.log("numericValue:"+numericValue);
  if (!isNaN(numericValue) && isFinite(numericValue)) {
    console.log("isFinite(numericValue):"+isFinite(numericValue));
    console.log("numericValue:"+numericValue);
    console.log("value:"+value);
    chineseAmount.value = numberToChinese(numericValue);
    console.log("chineseAmount.value:"+chineseAmount.value);
    
    work.authorization_fee = value;
    console.log("输入的金额："+value)
  } else {
    chineseAmount.value = '_________'; // 当内容为空或无效时显示默认下划线
    work.authorization_fee = ''; // 清空费用
  }
}

// 数字转大写的函数
function numberToChinese(n: string): string {
  // 校验输入是否为数字
  if (!/^\d*(\.\d*)?$/.test(n)) return "输入的不是数字";

  const units = ["", "拾", "佰", "仟", "万", "拾", "佰", "仟", "亿", "拾", "佰", "仟"];
  const chars = ["零", "壹", "贰", "叁", "肆", "伍", "陆", "柒", "捌", "玖"];

  let num = String(n);
  let resultWithUnit = "";
  let decimalPart = "";

  // 处理小数部分
  if (num.indexOf(".") !== -1) {
    const decimals = num.split(".")[1];
    decimalPart = "点";
    for (let i = 0; i < decimals.length; i++) {
      decimalPart += chars[Number(decimals[i])];
    }
    num = num.split(".")[0]; // 去掉小数部分
  }

  let unitPosition = 0; // 用于跟踪当前位对应的单位
  let zeroFlag = false; // 用于跟踪零的连续出现
  let hasNonZero = false; // 标记是否出现过非零数字

  // 处理整数部分
  for (let i = num.length - 1; i >= 0; i--) {
    const currentNum = num[i];
    const unitIndex = unitPosition % 12; // 使用12个单位

    if (currentNum === "0") {
      zeroFlag = true;
    } else {
      if (zeroFlag && hasNonZero) {
        resultWithUnit = chars[0] + resultWithUnit;
        zeroFlag = false; // 连续零结束
      }
      resultWithUnit = chars[Number(currentNum)] + units[unitIndex] + resultWithUnit;
      hasNonZero = true; // 标记为已出现非零数字
    }

    // 添加单位 "万" 或 "亿"
    if (unitIndex === 4 && i > 0) {
      resultWithUnit = "万" + resultWithUnit;
    }
    if (unitIndex === 8 && i > 0) {
      resultWithUnit = "亿" + resultWithUnit;
    }

    unitPosition++;
  }

  // 特殊处理：“壹拾”应改为“拾”
  if (resultWithUnit.startsWith("壹拾")) {
    resultWithUnit = resultWithUnit.replace("壹拾", "拾");
  }

  // 去掉“亿万”的情况，比如输入1000000000
  resultWithUnit = resultWithUnit.replace(/亿万/g, "亿");

  // 去掉末尾的“零”
  resultWithUnit = resultWithUnit.replace(/零+$/, "");

  return resultWithUnit + decimalPart;
}



// 剧本
const work = ref({
  wname: '', //剧本名称
  typeID: '',  //类型
  copyright: '', //版权登记号
  record: '',  //备案号
  time: '', //授权时长
  platform: '',  //授权平台
  age_limit: '', //授权年限
  authorization_fee: '',  //授权费用

}); // 示例数据

// 获取剧本信息
const fetchBookInfo = async (id) => {
  const WID = id;
  console.log("合同=》获取到的剧本id：" + JSON.stringify(WID, null, 2));
  try {
    const response = await axios.get(`http://localhost:8080/api/getwork/${WID}`); // 替换为实际的API端点
    work.value = response.data; // 假设后端返回的对象结构与book对象一致


    console.log("获取剧本信息成功：" + JSON.stringify(work.value, null, 2));
    convertToChinese2(work.value.authorization_fee)

    // 获取剧本类型
    await fetchWorkType(work.value.typeID); // 确保此时 work.value.TYPEID 已经是最新

  } catch (error) {
    console.error('Error fetching book info:', error);
  }
};

// //获取剧本题材列表
const scriptTypes = ref([]);  // 用于存储从后端获取的题材
const fetchScriptTypes = async (wid) => {
  try {
    const response = await axios.get(`http://localhost:8080/api/getworklabelByWid/${wid}`);
    scriptTypes.value = response.data.data; // 更新题材数据
    console.log('获取题材列表成功：', JSON.stringify(scriptTypes.value, null, 2));
    // console.log('获取题材列表成功：', JSON.stringify(scriptTypes[0].value.bname, null, 2));
  } catch (error) {
    console.error('Error fetching script types:', error);
  }
};

//获取剧本类
const work_type = ref('');
const fetchWorkType = async (id) => {

  try {
    const response = await axios.get(`http://localhost:8080/api/getworktypeByThemeId/${id}`);
    work_type.value = response.data; // 更新题材数据
    console.log('获取剧本类型成功：', JSON.stringify(work_type.value, null, 2));
    // console.log('获取题材列表成功：', JSON.stringify(work_type[0].value.bname, null))
  } catch (error) {
    console.error('遇到错误', error);
  }
}

//获取编剧信息
const writer = ref({
  account: '',
  uname: '',
  real_name: '',
});

// 定义 fetchWriterInfo 方法
const fetchWriterInfo = async () => {
  console.log("获取编剧信息")
  const Token = getToken();
  try {
    const response = await axios.get(
      'http://localhost:8080/user/getuser',
      {
        headers: {
          Authorization: 'Bearer ' + Token
        }
      }
    );
    writer.value = response.data.user; // 更新编剧数据
    writer.account = response.data.account;
    writer.uname = response.data.uname;
    writer.real_name = response.data.real_name;
    console.log('获取编剧信息成功：', JSON.stringify(writer.value, null, 2));
  } catch (error) {
    console.error('Error fetching writer info:', error);
  }
};

const updateTime = (event) => {
  work.value.Time = event.target.innerText; // 更新 Time 字段
};
const updateplatform = (event) => {
  work.value.platform = event.target.innerText; // 更新 Time 字段
};
const updateage_limit = (event) => {
  work.value.age_limit = event.target.innerText; // 更新 Time 字段
};
// 提交修改
function submitAgreement() {
  console.log('提交修改');
  const uWork = {
    wid: route.params.id,
    time: work.value.Time,
    age_limit: work.value.age_limit,
    authorization_fee: work.value.authorization_fee,
    platform: work.value.platform,
  };
  try {
    // console.log("我认可："+JSON.stringify(uWork.value, null, 2))
    console.log("Submitting work:", uWork);
    axios({
      method: 'post',
      url: 'http://localhost:8080/api/updateworkByContract',
      data: uWork,
    })
      .then(function (response) {
        console.log(response)
        console.log("response.data.data.code"+response.data.data.code);
        
        if (response.data.data.code == '200') {
          ElMessage({
            message: '修改成功',
            type: 'success',
            plain: true
          })
        }
      })




  } catch (error) {
    console.error("提交修改失败：" + error);
  }

};

// 页面挂载后获取书籍信息
onMounted(async () => {
  const wid = route.params.id;
  await fetchBookInfo(wid); //获取剧本信息
  await fetchScriptTypes(wid); // 获取题材列表
  await fetchWorkType(work.value.typeID);//获取剧本类型，使用更新后的 `typeID`
  await fetchWriterInfo();  //获取编剧信息
});
</script>

<style scoped>
/* 主容器样式 */
.agreement-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 30px;
  font-family: 'Arial', sans-serif;
  line-height: 1.6;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
}

/* 标题样式 */
h1 {
  text-align: center;
  font-size: 24px;
  font-weight: bold;
}

/* 段落内容样式 */
p {
  text-align: justify;
  text-indent: 2em;
  /* 首行缩进 */
}

/* 二级标题样式 */
h2 {
  font-size: 18px;
  margin-top: 20px;
  font-weight: bold;
}

/* 可编辑区域样式 */
.editable {
  position: relative;
  outline: none;
  display: inline-block;
  min-width: 120px;
  cursor: not-allowed;
  /* 禁用状态的鼠标样式 */
}

.editable:before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  border-bottom: 1px solid black;
}

.date-display {
  cursor: default;
  /* 指针样式 */
}

/* 签名区域样式 */
.sign-section {
  display: flex;
  justify-content: space-between;
  margin-top: 40px;
}

.sign-block {
  text-align: left;
  width: 45%;
  cursor: not-allowed;
  /* 禁用状态的鼠标样式 */
}

.sign-block p {
  margin-bottom: 10px;
}

/* 按钮样式 */
button {
  margin-top: 20px;
  padding: 10px 20px;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

button:hover {
  background-color: #0056b3;
}

/* 签名图片 */
.signature-image img {
  max-height: 50px;
  border-bottom: 1px solid black;
  cursor: default;
  cursor: not-allowed;
  /* 禁用状态的鼠标样式 */
}

/* 签名区域样式 */
.editable {
  cursor: pointer;
}

/* 签名弹出框样式 */
.signature-pad-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: white;
  padding: 20px;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
  z-index: 1000;
}

.signature-canvas {
  border: 1px solid black;
  width: 100%;
  height: 200px;
  display: block;
}

.disabled-area {
  cursor: not-allowed;
  /* 禁用状态的鼠标样式 */
}
</style>
